<template>
  <el-button>演示预览打印</el-button>
  <br><br>
  <el-button @click="xkprint('preview')">按模板预览打印</el-button>
  <div id="previewTemplatePrint"></div>
</template>
<script setup>
import {onMounted} from 'vue';
import data_duoweidu_config from './action_3_3.config.json'
import preview_data from './action_3_3.onUpdateData.json'

let spreadSheet
let reportPrint = null
const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true
};

let reportPreviewPrintOptions = [
  {
    name: "多维度交叉表累计",
    print: data_duoweidu_config
  }
]
onMounted(() => {
  spreadSheet = XZReport("#previewTemplatePrint", option);
  reportPrint = XZReportPrint();

});

function xkprint(printmode) {
  reportPrint.setTemplate(reportPreviewPrintOptions);
  reportPrint.previewPrint(preview_data)
}


</script>

<style scoped>

</style>
